import React from 'react'
import { ResultPage, Card, Button } from 'antd-mobile'
import styles from './css/kp.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { CapsuleTabs } from 'antd-mobile'
function chart() {
  return (
    <div className={styles.box}>
      <ResultPage
        status='success'
        title='操作成功'
        description='内容详情可折行，建议不超过两行建议不超过两行建议不超过两行'
      >
        <CapsuleTabs className={styles.jn}>
          <CapsuleTabs.Tab title='单程' key='fruits' />
          <CapsuleTabs.Tab title='往返' key='vegetables' />
          <CapsuleTabs.Tab title='多成' key='animals' />
          <CapsuleTabs.Tab title='特价票' key='tj' />
        </CapsuleTabs>
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div className={styles.row}>
            <span className={styles.bj}>北京</span>
            <LoopOutline className={styles.tb} />
            <span className={styles.sh}>上海</span>
          </div>
          <div className={styles.row}>
            <span className={styles.date}>11月1日</span>
            <span className={styles.ld}>明天离店</span>
          </div>
          <div className={styles.row}>
            <span className={styles.jj}>经纪/公务/头等舱</span>
            <span className={styles.cr}>1成人0儿童0婴儿</span>
          </div>
          <div className={styles.row}>
            <Button block color='warning' size='large'>
              开始搜索
            </Button>
          </div>
          <div className={styles.tp}>

          </div>
        </ResultPage.Card>

        

      </ResultPage>
    </div>
  )
}

export default chart